<template>
  <div class="main">
    <van-row class="van_row">
      <van-nav-bar
        title="品质档案"
        left-text=""
        right-text=""
        @click-left="onClickLeft"
        @click-right="onClickRight"
        fixed
      />
    </van-row>
    <van-row class="van-row_div">
      <van-col span="12" class="van-col_left" @click="chanpin">
        <van-icon name="shopping-cart" />
        产品查询
      </van-col>
      <van-col span="12" class="van-col_right" @click="shangjia">
        <van-icon name="point-gift" />
        商家查询
      </van-col>
    </van-row>
    <van-form>
      <van-field
        label="公司名称"
        v-model="inputs.names"
        name="pattern"
        placeholder="请输入内容"
      />
      <van-field
        label="品牌"
        v-model="inputs.text"
        name="pattern"
        placeholder="请输入内容"
      />

      <van-field
        label="产品"
        v-model="inputs.digit"
        name="validator"
        placeholder="请输入内容"
      />

      <van-field
        label="证书编号"
        v-model="inputs.number"
        name="asyncValidator"
        placeholder="请输入内容"
      />
      <div class="anniu">
        <van-button
          round
          block
          type="info"
          native-type="submit"
          @click="onFailed"
          >提交</van-button
        >
      </div>
    </van-form>
    <Footer></Footer>
  </div>
</template>

<script>
import Footer from "../../components/Footer/footer.vue";
export default {
  name: "",
  data() {
    return {
      inputs: {
        names: "",
        text: "",
        digit: "",
        number: "",
      },
    };
  },
  components: {
    Footer,
  },
  methods: {
    onClickLeft() {
      Toast("返回");
    },
    onClickRight() {
      Toast("按钮");
    },
    // 产品查询
    chanpin() {},
    // 商家查询
    shangjia() {},

    // 表单提交
    // 校验函数返回 true 表示校验通过，false 表示不通过
    validator(val) {
      return /1\d{10}/.test(val);
    },
    // 异步校验函数返回 Promise
    asyncValidator(val) {
      return new Promise((resolve) => {
        Toast.loading("验证中...");

        setTimeout(() => {
          Toast.clear();
          resolve(/\d{6}/.test(val));
        }, 1000);
      });
    },
    onFailed() {
      console.log(this.inputs);
      this.$router.push({path:"/qualityArchivestu"}).catch(error=>error)
    },
  },
  watch: {},
};
</script>

<style scoped lang='less'>
.main {
  .van_row {
    position: relative;
    .van-nav-bar {
      color: rgba(42, 131, 78, 1);
      background-color: rgba(239, 239, 239, 1);
      font-size: 14px;

      text-align: center;
      /deep/div.van-nav-bar__title {
        font-size: 18px;
        color: rgba(42, 131, 78, 1);
      }
    }
    .van-nav-bar_after {
      position: fixed;
      width: 77px;
      height: 29px;
      border-radius: 50px;
      border: 1px solid silver;
      line-height: 29px;

      text-align: center;
      font-size: 16px;
      z-index: 13;
      top: 8px;
      right: 10px;
    }
  }
  .van-row_div {
    height: 41px;
    margin: 10px 0;
    padding: 0 18px;
    margin-top: 56px;
    margin-bottom: 61px;
    cursor: pointer;
    .van-col_left,
    .van-col_right {
      width: 164px;
      height: 41px;
      margin-right: 5px;
      border: 1px solid green;
      background-color: white;
      color: green;
      border-radius: 5px;
      line-height: 41px;
      text-align: center;
      font-size: 16px;
    }
    .van-col_left {
      background-color: green;
      color: white;
    }
  }
  .van-form {
    .anniu {
      margin: 45px;
      .van-button--info {
        background-color: green;
        border: none;
      }
    }
  }
}
</style>